<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<template>
    <div class="content">
        <h3>块级引入</h3>
   <table border="1px solid #ccc">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in data" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
        </tr>
    </tbody>
   </table>

    </div>
</template>

<script>

    export default {
  data() {
    return {
      data:[{
        id:1,
        name:'张三'
      },{
        id:2,
        name:"李四",
      },
      {
        id:3,
        name:'王五',
      },],
    }
  },

}



</script>

<style>

.content{
  background-color: #fff;

  line-height: 200px;
  text-align: center;
  font-size: 24px;
  color: #333;

}
table{
    margin: 20px auto;
    border-collapse: collapse;
    width: 1000px;
    text-align: center;
}
th,td{
    border: 1px solid #ccc;
    padding: 10px;
}


</style>